<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>查询列表</title>
    <meta name="description" content="overview &amp; stats"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <#include "../../control/public_css_js.ftl">
</head>
<style>
    .ant-tag-green {
        color: #52c41a;
        background: #f6ffed;
        border-color: #52c41b;
        border: 1px solid #52c41a;
        padding: 0 4px;
        border-radius: 6px;
    }

    .ant-tag-magenta {
        color: #eb2f96;
        background: #fff0f6;
        border-color: #ffadd2;
        border: 1px solid #eb2f96;
        padding: 0 4px;
        border-radius: 6px;
    }

    .ant-tag-b1 {
        border: 3px solid #D15B47;
        padding: 0 1px;
        border-radius: 3px;
    }

    .ant-tag-b2 {
        border: 3px solid #87B87F;
        padding: 0 1px;
        border-radius: 3px;
    }


</style>

<body class="no-skin">
<!-- start top-->
<div id="navbar" class="navbar navbar-default          ace-save-state">
    <#include "../../layout/top.ftl">
</div>
<!-- end top-->


<div class="main-container ace-save-state" id="main-container">
    <script type="text/javascript">
        try {
            ace.settings.loadState('main-container')
        } catch (e) {
        }
    </script>

    <#include "../../layout/menu.ftl">


    <div class="main-content">
        <div class="main-content-inner">

            <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li>
                        <a href="#">配置管理</a>
                    </li>
                    <li class="active">Azkaban离线SQL列表</li>
                </ul>
            </div>


            <div class="page-content">

                <div class="row">
                    <div class="col-xs-12">

                        <div class="panel-body">
                            <form action="/admin/azKaBanSqlList" name="search" method="post">
                                <input type="hidden" name="pageNum" id="pageNum" value="${azKabanParam.pageNum}">
                                <input type="hidden" name="pageSize" id="pageSize" value="${azKabanParam.pageSize}">
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" placeholder="任务名称(模糊查询)"
                                           name="projectName" <#if (azKabanParam??)> value="${azKabanParam.projectName!""}" </#if> />
                                </div>
                                <div class="col-sm-2">
                                    <input type="text" class="form-control" placeholder="指标code"
                                           name="indicatorCode" <#if (azKabanParam??) >  value="${azKabanParam.indicatorCode!""}" </#if> />
                                </div>

                                <div class="col-sm-1">
                                    <button type="button" class="btn btn-purple btn-sm" onclick="searchForm(1)">搜索
                                    </button>
                                </div>
                                <div class="col-sm-1">
                                    <button type="button" class="btn btn-danger btn-sm" onclick="refreshForm()">刷新
                                    </button>
                                </div>
                                <div class="col-sm-1">
                                    <a class="btn btn-info btn-sm" href="/admin/azKaBanSqlAddBatchPage">新增离线任务</a>
                                </div>
                            </form>
                        </div>

                        <div class="panel-body">
                            <table class="table table-striped table-bordered" style="text-align: center;">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>任务名称</th>
                                    <th>指标名称</th>
                                    <#--                                    <th>变量</th>-->
                                    <th width="90px">启动状态</th>
                                    <th>周期类型</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>

                                <#if azKabanResp?size == 0>
                                    <tr>
                                        <td colspan="11" align="center">
                                            没有数据
                                        </td>
                                    </tr>
                                <#else>

                                    <#list azKabanResp as zaKanBanVO>
                                        <tr>
                                            <td>${zaKanBanVO.id!""}</td>
                                            <td>${zaKanBanVO.projectName!""}</td>
                                            <td>${zaKanBanVO.indicatorCode!""}</td>
                                            <#--                                            <td style="display: inline-block;overflow: hidden;width: 50px;word-break: keep-all;white-space: nowrap;text-overflow: ellipsis;line-height: 50px;float: left;">${zaKanBanVO.extParas!""}</td>-->
                                            <td align="center" height="34px">
                                                ${zaKanBanVO.status}
                                            </td>
                                            <td>${zaKanBanVO.indicatorCycleCorn!""}</td>
                                            <td>
                                                <a href="/admin/azKaBanSqlEditBatchPage?id=${zaKanBanVO.id}"
                                                   target="_blank">修改</a>
                                                &nbsp;
                                                <a href="#" onclick="executeFlowShow(${zaKanBanVO.id})">执行</a>
                                            </td>
                                        </tr>
                                    </#list>

                                </#if>
                                </tbody>
                            </table>
                        </div>

                        <#if azKabanResp?size != 0>
                            <div class="panel-body">
                                <ul class="pagination">
                                    <#if pageVO.pages lte 1>
                                        <li class="disabled "><a class="page-link" href="#">上一页</a></li>
                                    <#else>
                                        <li>
                                            <a class="page-link" href="#"
                                               onclick="searchForm(${pageVO.pages -1})">上一页</a>
                                        </li>
                                    </#if>

                                    <#list 1..pageVO.pages as index>
                                        <#if pageVO.pageNum == index>
                                            <li class="page-item active "><a class="page-link" href="#"
                                                                             onclick="searchForm(${index})">${index}</a>
                                            </li>
                                        <#else>
                                            <li>
                                                <a class="page-link" href="#"
                                                   onclick="searchForm(${index})">${index}</a>
                                            </li>
                                        </#if>
                                    </#list>

                                    <#if pageVO.pageNum gte pageVO.pages>
                                        <li class="disabled "><a class="page-link" href="#" onclick="">下一页</a></li>
                                    <#else>
                                        <li>
                                            <a class="page-link" onclick="executeFlowShow(${pageVO.pageNum+1})"
                                               href="#">下一页</a>
                                        </li>
                                    </#if>
                                </ul>
                            </div>
                        </#if>
                        <!-- PAGE CONTENT ENDS -->
                    </div><!-- /.col -->
                </div><!-- /.row -->

                <!-- 弹窗 -->
                <div class="modal" id="BASE_BOUNCED">
                    <div class="modal-content">
                        <div class="modal-body">
                            <div class="mb_revise">
                                <div class="form-group">
                                    <label for="inputfile">*周期：</label>
                                    <input class="form-control " type="text" placeholder="day,month,week_month"
                                           name="indicatorCycle" id="indicatorCycle">
                                </div>
                                <div class="form-group">
                                    <label for="inputfile">extParas：</label>
                                    <input class="form-control " type="text" placeholder="extParas" name="extParas"
                                           id="extParas">
                                </div>
                                <div class="form-group">
                                    <label for="inputfile">*startTime：</label>
                                    <input class="form-control " type="text" placeholder="extParas" name="extParas"
                                           id="extParas">
                                </div>
                                <div class="form-group">
                                    <label for="inputfile">*endTime：</label>
                                    <input class="form-control " type="text" placeholder="endTime" name="endTime"
                                           id="endTime">
                                </div>
                                <div class="form-group">
                                    <label for="inputfile">*startTime：</label>
                                    <input class="form-control " type="text" placeholder="startTime" name="startTime"
                                           id="startTime">
                                </div>
                                <input type="hidden" name="id" id="id" value="">
                            </div>
                            <button class="determine" onclick="executeFlow()">确定</button>
                            <button class="cancen" onclick="hidder()">取消</button>
                        </div>
                    </div>
                </div>

                <!-- log弹窗 -->
                <div class=".dl-horizontal" id="FLOW_LOG">

                </div>

            </div><!-- /.page-content -->
        </div>
    </div><!-- /.main-content -->


    <#include "../../layout/bottom.ftl">

</div><!-- /.main-container -->

<script src="/static/js/customer/list_job_config.js?version=20210123"></script>

<script type="text/javascript">
    $("#BASE_BOUNCED").hide();
    $("#FLOW_LOG").hide();

    function socketFlowLogs(data) {
        const socket = new WebSocket("ws://${socketPath}/flowLogHandler");

        socket.onopen = function () {
            console.log("建立链接成功，数据" + data + "数据发送中...");

            const dataJsonReq = {
                "execIds": data.data
            }

            socket.send(JSON.stringify(dataJsonReq));
        };
        socket.onmessage = function (evt) {
            const received_msg = evt.data;

            // 进行业务逻辑解析
            const data = JSON.parse(received_msg);

            const datum = data['data'];

            const div = $('#FLOW_LOG');

            var divStr = "";

            for (const key in datum) {
                // 通过key 去获取div 如果能获取到 就add
                const value = datum[key];

                const divKey = $('#log_' + key);

                var element;
                if (divKey.html() != null) {
                    element = divKey.html() + value['data'];
                } else {
                    element = value['data'];
                }
                divStr += "<div class=\".dl-horizontal\"  style='white-space: pre-line; border:solid 1px red; ' id='log_" + key + "'>" + element + "</div>"
            }

            divStr += "<button class=\"determine\" id=\"LOG_BUTTON_CLOSE\" onclick='LogHidder()'>关闭</button>";
            div.html(divStr);
            div.show();
        };

        socket.onclose = function () {
            // 关闭 websocket
            console.log("连接已关闭...");
        };


    }

    function LogHidder() {
        $("#FLOW_LOG").html('');
        $("#FLOW_LOG").hide();
    }

</script>
</body>
</html>
